<template>
  <div>
    <!-- <div class="bg-white grid-content">
      <el-form :inline="true" :model="scyxrbForm" class="demo-form-inline">
        <el-form-item label="日期:">
          <el-date-picker
            v-model="searchDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="formSearch()">查询</el-button>
          <el-button type="success" @click="download()">下载</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="bg-white grid-content">
      <div style="overflow: hidden">
        <div class="mytitle">生产运行日报</div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
        border
        stripe
      >
        <el-table-column
          v-if="show"
          type="index"
          label="序号"
          :index="indexMethod"
        >
        </el-table-column>
        <el-table-column
          align="center"
          fixed="left"
          prop="rq"
          label="日期"
          width="100px"
        >
        </el-table-column>

        <el-table-column prop="bz" width="80" align="center"> </el-table-column>
        <el-table-column prop="zj" label="钻井" width="150" align="center">
          <el-table-column
            prop="zjJh"
            label="计划（口）"
            width="64"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="zjWc"
            label="完钻（口）"
            width="64"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="zjZj"
            label="钻机（台）"
            width="64"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column prop="tc" label="投产" width="150" align="center">
          <el-table-column
            prop="tcJh"
            label="计划（口）"
            width="64"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="tcWc"
            label="完钻（口）"
            width="64"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column prop="bk" label="老井补孔" width="150" align="center">
          <el-table-column
            prop="bkJh"
            label="计划（口）"
            width="64"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="bkWc"
            label="完钻（口）"
            width="64"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="yl"
          label="油水井常规压裂"
          width="150"
          align="center"
        >
          <el-table-column
            prop="ylJh"
            label="计划（口）"
            width="64"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ylWc"
            label="完钻（口）"
            width="64"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column prop="fw" label="缝网压裂" width="150" align="center">
          <el-table-column
            prop="fwJh"
            label="计划（口）"
            width="64"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="fwWc"
            label="完钻（口）"
            width="64"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column prop="zs" label="注水" width="150" align="center">
          <el-table-column
            prop="ct"
            label="阶段测调（综合调整方案）"
            width="64"
            align="center"
          >
            <el-table-column
              prop="ctJh"
              label="计划（口）"
              width="64"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="ctWc"
              label="完钻（口）"
              width="64"
              align="center"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column prop="cp" label="重配" width="64" align="center">
            <el-table-column
              prop="cpJh"
              label="井数（口）"
              width="64"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="cpWc"
              label="日影响（立方米）"
              width="64"
              align="center"
            >
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="cy" label="采油" align="center">
          <el-table-column prop="jbj" label="检泵井" width="150" align="center">
            <el-table-column
              prop="jbjJs"
              label="井数（口）"
              width="64"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="jbjYx"
              label="日影响（吨）"
              width="64"
              align="center"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column prop="jyj" label="积压井" width="150" align="center">
            <el-table-column
              prop="jyjJs"
              label="井数（口）"
              width="64"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="jyjYx"
              label="日影响（吨）"
              width="64"
              align="center"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column prop="cyj" label="测压井" width="150" align="center">
            <el-table-column
              prop="cyjJs"
              label="井数（口）"
              width="64"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="cyjYx"
              label="日影响（吨）"
              width="64"
              align="center"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column prop="csj" label="措施井" width="150" align="center">
            <el-table-column prop="yl" label="压裂" width="64" align="center">
              <el-table-column
                prop="ylJs"
                label="井数（口）"
                width="64"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="ylYx"
                label="日影响（吨）"
                width="64"
                align="center"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column
              prop="tg"
              label="邻井封井/套管调查"
              width="64"
              align="center"
            >
              <el-table-column
                prop="tgJs"
                label="井数（口）"
                width="64"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="tgYx"
                label="日影响（吨）"
                width="64"
                align="center"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column
              prop="csph"
              label="措施配合"
              width="64"
              align="center"
            >
              <el-table-column
                prop="csphJs"
                label="井数（口）"
                width="64"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="csphYx"
                label="日影响（吨）"
                width="64"
                align="center"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="hjyx"
            label="合计影响"
            width="64"
            align="center"
          >
            <el-table-column
              prop="hjyxJs"
              label="井数（口）"
              width="64"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="hjyxYx"
              label="日影响（吨）"
              width="64"
              align="center"
            >
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        align="right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import scyxrbApi from "@/api/scyxrb";

export default {
  data() {
    return {
      show: false, //隐藏序列
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
      currentPage: 1, //当前页码
      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      searchDate: null,
      //  表头数据
      tableHead: [
        { val: "指标11111", item: "target1" },
        { val: "指标2", item: "target2" },
        { val: "指标3", item: "target3" },
        { val: "指标4", item: "target4" },
        { val: "指标5", item: "target5" },
      ],
      // 表格数据
      tableData: [],
      approveStatus: "",
      scyxrbForm: {
        id: "",
        rq: "",
        approveStatus: "",
        approveBz: "",
        zjJh: "", //计划钻井
        zjWc: "", //钻井完成
        zjZj: "", //钻机数量
        tcJh: "", //计划投产
        tcWc: "", //投产完成
        bkJh: "", //计划老井补孔
        bkWc: "", //老井补孔完成
        ylJh: "", //油水井常规压裂计划
        ylWc: "", //油水井常规压裂计划
        fwJh: "", //缝网压裂计划
        fwWc: "", //缝网压裂完成
        ctJh: "", //计划阶段测调
        ctWc: "", //阶段测调完成
        cpJh: "", //重配井口数
        cpWc: "", //重配日影响
        jbjJs: "", //检泵井井口数
        jbjYx: "", //检泵井影响
        jyjJs: "", //积压井井口数
        jyjYx: "", //积压井影响
        cyjJs: "", //测压井井口数
        cyjYx: "", //测压井影响
        ylJs: "", //措施井压裂井口数
        ylYx: "", //措施井压裂影响
        tgJs: "", //措施井邻井封井井口数
        tgYx: "", //措施井邻井封井影响
        csphJs: "", //措施配合井口数
        csphYx: "", //措施配合影响
        hjyxJs: "", //合计影响井口数
        hjyxYx: "", //合计日影响
      },
      // // table数据总条数
      // tableTotal: 30,
      // // 分页数
      // currentSize: 10,
      // //当前页
      // currentPage: 4
    };
  },
  mounted() {
    this.search(this.pageNo, this.pageSize);
  },
  methods: {
    /**
     * 查询列表
     */
    async search(pageNo, pageSize, approveStatus, startDate, endDate) {
      let res = await scyxrbApi.getDataList(
        pageNo,
        pageSize,
        approveStatus,
        startDate,
        endDate
      );
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        //赋值
        this.tableData = res.data.records;
        //总数量
        this.total = res.data.total;
      }
    },
    //条件查询
    formSearch() {
      console.log(this.searchDate);
      if (!this.searchDate) {
        this.search(this.pageNo, this.pageSize);
      } else {
        this.search(
          this.pageNo,
          this.pageSize,
          this.approveStatus,
          this.searchDate[0],
          this.searchDate[1]
        );
      }
    },
    //下载
    download() {
      import("@/vendor/Export2Excel").then((excel) => {
        const multiHeader = [
          [
            "生产运行日报",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
          ],
          [
            "日期",
            "",
            "钻井",
            "",
            "",
            "投产",
            "",
            "老井补孔",
            "",
            "油水井常规压裂",
            "",
            "缝网压裂",
            "",
            "注水",
            "",
            "",
            "",
            "采油",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
          ], //第一行31
          [
            "",
            "",
            "计划（口）",
            "完钻（口）",
            "钻机（台）",
            "计划（口）",
            "完成（口）",
            "计划（口）",
            "完成（口）",
            "计划（口）",
            "完成（口）",
            "计划（口）",
            "完成（口）",
            "阶段测调（综合调整方案）",
            "",
            "重配",
            "",
            "检泵井",
            "",
            "积压井",
            "",
            "测压井",
            "",
            "措施井",
            "",
            "",
            "",
            "",
            "",
            "合计影响",
            "",
          ], //第二行31
          [
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "计划（口）",
            "完成（口）",
            "井数（口）",
            "日影响（立方米）",
            "井数（口）",
            "日影响（吨）",
            "井数（口）",
            "日影响（吨）",
            "井数（口）",
            "日影响（吨）",
            "压裂",
            "",
            "邻井封井/套管调查",
            "",
            "措施配合",
            "",
            "井数（口）",
            "日影响（吨）",
          ], //第三行
        ]; // 前三行的表头数据，二维数组，不够的用空白补全
        const header = [
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "井数（口）",
          "日影响（吨）",
          "井数（口）",
          "日影响（吨）",
          "井数（口）",
          "日影响（吨）",
          "",
          "",
        ]; // 最后一行的表头数据
        const filterVal = [
          "rq",
          "bz",
          "zjJh",
          "zjWc",
          "zjZj",
          "tcJh",
          "tcWc",
          "bkJh",
          "bkWc",
          "ylJh",
          "ylWc",
          "fwJh",
          "fwWc",
          "ctJh",
          "ctWc",
          "cpJh",
          "cpWc",
          "jbjJs",
          "jbjYx",
          "jyjJs",
          "jyjYx",
          "cyjJs",
          "cyjYx",
          "ylJs",
          "ylYx",
          "tgJs",
          "tgYx",
          "csphJs",
          "csphYx",
          "hjyxJs",
          "hjyxYx",
        ];
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        const merges = [
          "A1:AE1",
          "A2:A5",
          "B2:B5",
          "C2:E2",
          "F2:G2",
          "H2:I2",
          "J2:K2",
          "L2:M2",
          "N2:Q2",
          "R2:AE2",
          "N3:O3",
          "P3:Q3",
          "R3:S3",
          "T3:U3",
          "V3:W3",
          "X3:AC3",
          "AD3:AE3",
          "C3:C5",
          "D3:D5",
          "E3:E5",
          "F3:F5",
          "G3:G5",
          "H3:H5",
          "I3:I5",
          "J3:J5",
          "K5:K5",
          "L5:L5",
          "M3:M5",
          "N4:N5",
          "O4:O5",
          "P4:P5",
          "Q4:Q5",
          "R4:R5",
          "S4:S5",
          "T4:T5",
          "U4:U5",
          "V4:V5",
          "W4:W5",
          "AD4:AD5",
          "AE4:AE5",
          "X4:Y4",
          "Z4:AA4",
          "AB4:AC4",
        ]; // 合并单元格的数据，如何合并参考上面图片的蓝色背景部分
        excel.export_json_to_excel({
          multiHeader,
          header,
          filename: "生产运行日报",
          autoWidth: true,
          merges,
          data,
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    /*** 当每页数量发生变化时触发该事件 */
    handleSizeChange(size) {
      console.log(size);
      this.pageSize = size;
      //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /*** 当页码发生变化时触发该事件 */
    handleCurrentChange(page) {
      console.log(page);
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },
    // 序号计算
    indexMethod(index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.pageNo - 1) * this.pageSize;
    },
  },
};
</script>


<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: larger;
  padding-left: 45%;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myTime {
  float: right;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>